<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title><s:message code="app.title" /></title>
<%@ include file="Include.jsp"%>
<script type="text/javascript">
	
	$(document).ready(function() {
	
		$("[data-toggle=modal]").click(function(ev) {
			ev.preventDefault();
			
			// load the url and show modal on success
			$( $(this).attr('data-target') ).load($(this).attr("href"), function() {
				$($(this).attr('data-target')).modal("show");
				$(this).find("#firstName").focus();
			});
			
		});
	
		$("#modeid").focus();	
	});
	
	
</script>
</head>
<body>
	<div class="container">
		<%@ include file="Menu.jsp"%>
		<h2><s:message code="jobRegisterForm.addheader" /></h2>
		<hr>
		<form:form id="cancelForm">
		</form:form>
		<form:form class="form-horizontal" method="post" name="jobregisterForm" id="jobregisterForm" commandName="jobregisterForm"
	           modelAttribute="jobregisterForm" >
	           <form:errors cssClass="text-error" path="*" />
			<table class="table table-bordered">
				<tr>
					<th><form:label path="jobno"><s:message code="jobRegisterForm.jobno" /></form:label></th>
					<td>
						<form:input path="jobno" cssClass="input-medium" id="jobno" maxlength="20" size="20" readonly="true"/>
						<form:errors cssClass="text-error" path="jobno" />
					</td>
					<th><form:label path="modeid"><s:message code="jobRegisterForm.modeid" /></form:label></th>
					<td>
						<form:select path="modeid" cssClass="input-small" tabindex="1" onchange="javascript: updateModeDiv();">						
							<form:option value="">-SELECT-</form:option>
							<form:options items="${modeList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
						&nbsp;&nbsp;
						<label class="checkbox inline">
						<input type="checkbox" id="chkNominatino" value="option1" tabindex="2"> Nomination
						</label>
					</td>
					<th><form:label path="carrierid" id="carrierLabel"><s:message code="jobRegisterForm.carrierid" /></form:label></th>
					<td>
						<form:select path="carrierid" cssClass="input-large" tabindex="3">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${contactList}" itemLabel="fullname" itemValue="contactid" />
						</form:select>
					</td>
				</tr>
				<tr>
				<th><form:label path="salespersonid"><s:message code="jobRegisterForm.salespersonid" /></form:label></th>
					<td>
						<form:select path="salespersonid" cssClass="input-small" tabindex="4">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${userList}" itemLabel="firstname" itemValue="userid" />
						</form:select>
					</td>					
					<th><form:label path="categoryid"><s:message code="jobRegisterForm.category" /></form:label></th>
					<td>
						<form:select path="categoryid" cssClass="input-clarge" tabindex="5" >
							<form:option value="">-SELECT-</form:option>
							<form:options items="${categoryList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
					</td>
					<th><form:label path="bookingbyid"><s:message code="jobRegisterForm.bookingbyid" /></form:label></th>
					<td colspan="4">
						<form:select path="bookingbyid" cssClass="input-large" tabindex="6">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${contactList}" itemLabel="fullname" itemValue="contactid" />
						</form:select>
					</td>
				</tr>
				<tr>
				<th><form:label path="shipperid"><s:message code="jobRegisterForm.shipperid" /></form:label></th>
					<td>
						<form:select path="shipperid" cssClass="input-large" tabindex="7">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${contactList}" itemLabel="fullname" itemValue="contactid" />
						</form:select>
					</td>
					<th><form:label path="emptypickupid" id="emptyPickupLabel"><s:message code="jobRegisterForm.emptypickup" /></form:label></th>
					<td>
						<form:select path="emptypickupid" cssClass="input-large" tabindex="8" >
							<form:option value="">-SELECT-</form:option>
							<form:options items="${portList}" itemLabel="portname" itemValue="portid" />
						</form:select>
					</td>
					<th><form:label path="polid"><s:message code="jobRegisterForm.polid" /></form:label></th>
					<td>
						<form:select path="polid" cssClass="input-large" tabindex="9">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${portList}" itemLabel="portname" itemValue="portid" />
						</form:select>
					</td>
				</tr>
				<tr>
				<th><form:label path="billingtoid"><s:message code="jobRegisterForm.billingtoid" /></form:label></th>
					<td>
						<form:select path="billingtoid" cssClass="input-large" tabindex="10">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${contactList}" itemLabel="fullname" itemValue="contactid" />
						</form:select>
					</td>
					<th><form:label path="stuffpointid"><s:message code="jobRegisterForm.stuffpointid" /></form:label></th>
					<td>
						<form:select path="stuffpointid" cssClass="input-large" tabindex="11" >
							<form:option value="">-SELECT-</form:option>
							<form:options items="${stuffbyList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
					</td>
					<th><form:label path="podid"><s:message code="jobRegisterForm.podid" /></form:label></th>
					<td>
						<form:select path="podid" cssClass="input-large" tabindex="12">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${portList}" itemLabel="portname" itemValue="portid" />
						</form:select>
					</td>
				</tr>
				<tr>
				<th><form:label path="chaid"><s:message code="jobRegisterForm.chaid" /></form:label></th>
					<td>
						<form:select path="chaid" cssClass="input-large" tabindex="13">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${contactList}" itemLabel="fullname" itemValue="contactid" />
						</form:select>
					</td>
					<th><form:label path="cleranceatid"><s:message code="jobRegisterForm.cleranceat" /></form:label></th>
					<td>
						<form:select path="cleranceatid" cssClass="input-large" tabindex="14" >
							<form:option value="">-SELECT-</form:option>
							<form:options items="${stuffbyList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
					</td>
					<th><form:label path="pfdid"><s:message code="jobRegisterForm.pfdid" /></form:label></th>
					<td colspan="3">
						<form:select path="pfdid" cssClass="input-large" tabindex="15">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${portList}" itemLabel="portname" itemValue="portid" />
						</form:select>
					</td>
				</tr>
				<tr>
					<th><form:label path="cargotypeid"><s:message code="jobRegisterForm.cargotype" /></form:label></th>
					<td>
						<form:select path="cargotypeid" cssClass="input-large" tabindex="16" onchange="javascript: updateHazCargoDiv();">
							<form:option value="">-SELECT-</form:option>
							<form:options items="${cargotypeList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
					</td>
 					<!--Start HAZ detail form -->
					<td colspan="5" id="hazrefcolor">
					<div id="hazConsignmentTable" style="display: none">
						<form:select path="codetableclass" cssClass="input-xhlarge" tabindex="17" >
							<form:option value="">- HAZ Class -</form:option>
							<form:options items="${hazclassList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
						<form:errors cssClass="text-error" path="codetableclass" />
						&nbsp;
						<form:input path="unno" cssClass="input-small" id="unno" maxlength="20" size="20" type="text" placeholder="UN No." tabindex="18"/>
						<form:errors cssClass="text-error" path="unnohumodity" />
						&nbsp;
						<form:select path="pkggrp" cssClass="input-small" tabindex="19" > 
							<form:option value="">- Group -</form:option>
							<form:options items="${hazpkggroupList}" itemLabel="formvalue" itemValue="codetableid" />
						</form:select>
						<form:errors cssClass="text-error" path="pkggrpvent" />
					</div>
					<!--End HAZ detail form-->
					<!--Start Reefer detail form-->					
					<div id="reeferConsignmentTable" style="display: none; color: #FFFFFF;">
					&nbsp; Temprature &nbsp; <form:input path="temprature" cssClass="input-medium" id="temprature" maxlength="20" size="20" type="text" placeholder="30 C" tabindex="20" />
					<form:errors cssClass="text-error" path="temprature" />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Humodity &nbsp; <form:input path="humodity" cssClass="input-medium" id="humodity" maxlength="20" size="20" type="text" placeholder="Humodity" tabindex="21"/>
					<form:errors cssClass="text-error" path="humodity" />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Vent &nbsp; <form:input path="vent" cssClass="input-medium" id="vent" maxlength="20" size="20" type="text" placeholder="Vent" tabindex="22"/>
					<form:errors cssClass="text-error" path="vent" />
					<!--End Reefer detail form-->
					</div>
					</td>
				</tr>				
				<tr>
					<th><form:label path="inttrano"><s:message code="jobRegisterForm.inttrano"/></form:label></th>
					<td>
					<form:input path="inttrano" cssClass="input-large" id="inttrano" maxlength="30" size="30" type="text" placeholder="Inttra No." tabindex="23"/>
					<form:errors cssClass="text-error" path="inttrano" />
					</td>
					<th><form:label path="bookingno"><s:message code="jobRegisterForm.bookingno"/></form:label></th>
					<td>
					<form:input path="bookingno" cssClass="input-large" id="bookingno" maxlength="30" size="30" type="text" placeholder="Booking No." tabindex="24"/>
					<form:errors cssClass="text-error" path="bookingno" />
					</td>
					<td colspan="3">
					<form:select path="additionalrequirementsid" cssClass="input-xalarge" tabindex="25" >
					<form:option value="">Select Additional Requirements</form:option>
					<form:options items="${additionalrequirementsList}" itemLabel="formvalue" itemValue="codetableid" />
					</form:select>
					<a data-toggle="modal" href="AddAdditionalRequirement" data-target="#clientAddEditScreenHolder" class="btn" title="Add Additional Requirements" tabindex="26"><i class="icon-edit"></i></a>
					</td>
				</tr>
				<tr>
				<th><form:label path="bkgvslid">Vessel</form:label></th>
					<td>
					<form:select path="bkgvslid" cssClass="input-xalarge" tabindex="27" onchange="javascript: updateVoyageInfo(this);">
						<form:option value="">-SELECT-</form:option>
						<form:options items="${voyageList}" itemLabel="vesselVoyagePOL" itemValue="voyageid" />	
					</form:select>
					</td>
					<th><form:label path="cutoff"><s:message code="jobRegisterForm.cutoff"/></form:label></th>
					<td>
					<form:input path="cutoff" cssClass="input-large" id="cutoff" type="text" placeholder="DD/MM/YYYY"/>
					<form:errors cssClass="text-error" path="cutoff" />
					</td>
					<th><form:label path="etd"><s:message code="jobRegisterForm.etd"/></form:label></th>
					<td>
					<form:input path="etd" cssClass="input-large" id="etd" type="text" placeholder="DD/MM/YYYY"/>
					<form:errors cssClass="text-error" path="etd" />
					</td>
				</tr>
			</table>
		<br>
			<button class="btn btn-primary" type="submit" formaction="AddJobRegister" formmethod="post" tabindex="28"><s:message code="app.add" /></button>
			<button class="btn" type="submit" formaction="ListJobRegister" form="cancelForm" formmethod="get" tabindex="29"><s:message code="app.cancel" /></button>
		</form:form>
	</div>
	<div id="clientAddEditScreenHolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	</div>
</body>
</html>